<template>
  <div>
    <el-dialog
      title="区域详情"
      :visible="viewVisible"
      width="60%"
      @close="close"
    >
      <el-form>

        <el-form-item label="区域名称">
          <el-form-item>{{ rows.name }}</el-form-item>
          <el-form-item label="包含点位">
            <el-table
              :data="streets"
              style="width: 80%"
              :border="false"
            >
              <el-table-column
                type="index"
                label="序号"
              />
              <el-table-column
                prop="name"

                label="区域名称"
              />
              <el-table-column
                prop="nodeCount"
                label="设备数量"
              />
            </el-table>
          </el-form-item>
        </el-form-item></el-form>

    </el-dialog>
  </div>
</template>

<script>
// import { lookStreet } from '@/api/area'
export default {
  props: {
    viewVisible: {
      type: Boolean,
      required: true,
      default: false
    },
    rows: {
      type: Object,
      required: true
    },
    streets: {
      type: Array,
      required: true

    }
  },
  data() {
    return {
    }
  }, mounted() {

  },
  created() {
  },
  methods: {
    close() {
      this.$parent.viewVisible = false
    }
  }
}

</script>

<style lang='scss'>

.el-table__header{
.is-leaf{
 background-color: #f3f6fb;

}
}
</style>
